<%- include('../../common/header.html',{css:'common'}) %>
<%- include('../../common/script-validation.html') %>
<%- include('../../common/script-ajax-file-upload.html') %>
<%- include('../../common/script-jcrop.html') %>
<%- include('../../common/layer.html') %>
<%- include('../../common/script-codemirror.html') %>
<%- include('../../common/imgs.html') %>
<style>
    body{
        padding-top:0px;
    }
    .rectangle{
        background:#F9F9F9;
        height:60px;
        margin-bottom:15px;
    }

    .max-centent{
        margin:15px;
        padding:12px;
        border:1px solid rgba(238,238,238,1);
    }
    .search-box{
        display: flex;
        align-items: center;
        background:#F2F2F2;
        padding:30px 0;
    }
    .search-box .photo-name{
        width:200px;
        height:32px;
        font-size:14px;
        color:#000000;
        line-height: 32px;
        padding-left:30px;
        border-radius:3px;
        border:1px solid rgba(0,0,0,0.15);
        margin-left:37px;
    }
    .search-box select{
        width:272px;
        height:32px;
        border-radius:3px;
        border:1px solid rgba(0,0,0,0.15);
        margin-left:25px;
        font-size:14px;
        color:#000000;
        line-height: 32px;
        padding-left:12px;
    }
    .search-box #searchPic,.reset{
        width:138px;
        height:32px;
        background:#FEC802;
        border-radius:4px;
        font-size:14px;
        color:#FFFFFF;
        line-height: 32px;
        border:none;
        margin-left:50px;
    }
    .search-box .reset{
        margin-left:25px;
        background:#DDDDDD;
        color:#333333;
    }
    ul li {
        list-style: none;
    }
    .picture{

    }
    .picture ul{
        display: flex;
        flex-wrap: wrap;

    }

    .active{
        background:#333333;
    }
    .picture ul li {
        width:150px;
        height:150px;
        flex-shrink: 1;
        border-radius: 10px;
        background:#fff;
        /*margin-top:20px;*/
        /*margin-right:20px;*/
        position: relative;
        padding:10px;
        box-sizing: content-box;
        margin:10px ;
    }
    /*.picture ul li:nth-child(7n){*/
    /*margin-right:0;*/
    /*}*/
    #test1{
        padding:10px;
        margin:10px;
    }


    .pictures li .span{
        display: flex;
        /*display: block;*/
        width:100%;
        height:100%;
        align-items: center;
    }
    .picture li .img{
        position:absolute;
        bottom:0px;
        right:0px;
        width:30px;
    }

    .personal-infor{
        padding-top:20px;
        position:absolute;
        left:70px;
        top:0px;
        background:white;
        width:126px;
        z-index: 1000;
        display: none;
    }
    .infor-mation{
        display: flex;
        align-items: center;
        padding-bottom:20px;
    }
    .infor-mation img{
        display: block;
        width:16px;
        height:16px;
        padding-left:19px;
        padding-right:6px;
    }
    .infor-mation span{
        display: block;
        font-size:14px;
        color:black;
        line-height: 20px;
    }
    .personal{
        position:relative;
    }
    .personal-span{
        width:0px;
        height:0px;
        border:8px solid transparent;
        border-right-color:white;
        position:absolute;
        left:54px;
        top:50%;
        display: none;

    }
    .order-manage{
        width:126px;
        background:white;
        padding-top:20px;
        position:absolute;
        left:84px;
        top:0;
        z-index: 1000;
        z-index: 1000;
        display: none;
    }
    .order-manage p{
        font-size: 14px;
        line-height: 20px;
        color:black;
        padding-bottom:20px;
        text-align: center;
    }
    .order-span{
        width:0px;
        height:0px;
        border:8px solid transparent;
        border-right-color:white;
        position:absolute;
        left:68px;
        top:40%;
        display: none;
        z-index: 1000;

    }
    /*.order-management:hover .order-manage{*/
    /*    display: block;*/
    /*}*/
    /*.order-management:hover .order-span{*/
    /*    display: block;*/
    /*}*/
    .advie{
        display:none!important;
    }


    .pictures li:first-child{
        /*border:1px dashed black;*/
        position:relative;
        height:150px;
        padding:10px;
        overflow: hidden;
        box-sizing: border-box;

    }
    .pictures li:first-child:hover{
        border:1px solid black;
    }

    .pictures li:first-child:hover .jia{

        color: black;
        left:42%;
        top:20%;
    }

    .jia{
        position:absolute;
        font-size: 36px;
        color:black;
        text-align: center;
        /*width:100%;*/
        background:transparent;

        left:42%;
        top:30%;
    }
    .addFileTypeTips{
        display: none;
        width:100%;
        height: 45px;
        text-align: center;
        font-size: 14px;
        color: black;
        position:absolute;
        left:0px;
        top:60%;
    }
    .pictures li:first-child:hover .addFileTypeTips{
        display:block;
    }
    .pictures li .span img{
        display: block;
        margin:0 auto;
        width:100%;
        height:100%;
    }
    #test1 .site-demo-button{
        position: relative;
        text-align: center;
        height: 150px;
        z-index:1000;
    }
    #test1 .site-demo-button .btn-primary{
        background:transparent;
        line-height: 150px;
        border:none;
        font-size: 36px;
        color:transparent;
        width:100%;
        margin:0!important;
        padding:0;
    }
    .pictures li:first-child:hover .btn-primary{
        line-height: 120px;
        color:black;
        margin:0!important;
    }
    .picture ul li .span{
        background:#fff;
    }
    #searchPic{
        display: block;
    }

</style>
<title>编辑-后台管理系统</title>
</head>
<body class="page">
<%- include('../../common/top-nav.html') %>
<div class="content">
    <div class="panel panel-default" style="overflow-y: auto;">
        <div class="panel-body">
            <div id="form">
                <!--<div class="rectangle"></div>-->
                <div class="max-centent">
                    <div class="search-box">
                        <input type="text" class="photo-name" placeholder="请输入照片名称"/>

                        <button id="searchPic">搜索</button>
                    </div>

                    <div class="picture">
                        <ul class="pictures" >
                            <li id="test1">
                                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                                    <button data-method="setTop" class="layui-btn" style="border: none;">+</button>
                                </div>
                                <div class="jia">+</div>
                                <div class="addFileTypeTips">
                                    <div>可上传</div>
                                    <div>jpg/png/gif/svg</div>
                                </div>

                            </li>
                        </ul>
                        <div class="panel-body" id="uploader">
                            <div class="row imgs" style="padding: 0;">
                                <div class="statusBar" style="">
                                    <div class="progress" style="display: none;">
                                        <span class="text">0%</span>
                                        <span class="percentage" style="width: 0%;"></span>
                                    </div>
                                    <div class="btns">
                                        <div id="filePicker2" class="webuploader-container">
                                            <div id="rt_rt_1cue2fv431014bhd1aet96fgov6"
                                                 style="position: absolute; top: 0px; left: 10px; width: 94px; height: 42px; overflow: hidden; bottom: auto; right: auto;">
                                                <input type="file" name="file" class="webuploader-element-invisible"
                                                       multiple="multiple" accept="image/*"><label
                                                    style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="placeholder"></div>
                                <!--<div class="col-sm-4">-->
                                    <!--<div class="item-trigger" style="position: relative;">-->
                                        <!--<div class="btns">-->
                                            <!--<a href="javascript:void(0);" class="btn btn-secondary select-from-libs">从图片库中选择</a>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="su-pager text-right"></div>
            </div>

        </div>
    </div>
</div>
</body>
<%- include('../../common/script-ueditor.html') %>
<!-- build:js ../../scripts/sys/category/imgs.js  -->
<script type="text/javascript" src="./../../../libs/su/upload.js"></script>
<script type="text/javascript" src="./imgs.js"></script>
<!-- endbuild -->
</html>

